<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:56
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage>
    <template #action>
    </template>

    <MeCrud
      ref="$table"
      v-model:query-items="queryItems"
      :scroll-x="1200"
      :columns="columns"
      :get-data="api.read"
    >
      <MeQueryItem label="商品名" :label-width="50">
        <n-input
          v-model:value="queryItems.goodsName"
          type="text"
          placeholder="请输入用户名"
          clearable
        />
      </MeQueryItem>
    </MeCrud>
  </CommonPage>
</template>

<script setup>
import { NAvatar, NButton, } from 'naive-ui'
import api from './api'
import {  request } from '@/utils'
import { MeCrud,  MeQueryItem } from '@/components'
import { useCrud } from '@/composables'

defineOptions({ name: 'GoodsMgt' })

const $table = ref(null)
/** QueryBar筛选参数（可选） */
const queryItems = ref({})

onMounted(() => {
  $table.value?.handleSearch()
})

const {
  handleDelete,
  handleOpen,
} = useCrud({
  name: '物料',
  initForm: { enable: true },
  doCreate: (params = {}) => request.get('/user', { params }),
  doDelete: (params = {}) => request.get('/user', { params }),
  doUpdate: (params = {}) => request.get('/user', { params }),
  refresh: () => $table.value?.handleSearch(),
})

const columns = [
  { title: '昵称', key: 'nickName', width: 150, ellipsis: { tooltip: true } },
  {
    title: '手机号',
    key: 'phoneNumber',
    width: 250,
    ellipsis: { tooltip: true },
  },
  { title: '会员号', key: 'memberCardId', width: 150, ellipsis: { tooltip: true } },
  {
    title: '最近登录时间',
    key: 'lastLoginTime',
    width: 250,
    ellipsis: { tooltip: true }
  },
  {
    title: '操作',
    key: 'actions',
    width: 320,
    align: 'right',
    fixed: 'right',
    hideInExcel: true,
    render(row) {
      return [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            secondary: true,
            onClick: () => handleOpenRolesSet(row),
          },
          {
            default: () => '绑定会员',
            icon: () => h('i', { class: 'i-carbon:user-role text-14' }),
          },
        )
      ]
    },
  },
]

</script>
